<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="com.lkj.model.User" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link href="<%=request.getContextPath()%>/css/common.css" rel="stylesheet" />
<title>华纵科技</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script>
<script src="<%=request.getContextPath()%>/js/jquery.floatDiv.js"></script>
<script src="<%=request.getContextPath()%>/js/common.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/bootstrap/js/bootstrap-paginator.js"></script>
    <%
        User user = (User) request.getSession().getAttribute("user");
    %>
<script type="text/javascript">
var contextTemp = "";
var orderTemp = "asc";
$(function() {
    //初始化页面
    initPage(orderTemp,"",1);

    $("#ssbtn").click(function(){
        var search = $("#ssinput").val();
        initPage(orderTemp,search,1);
    })

    $(document).on("click",".searchBtn,.cleanBtn,.video_li,.desc,.asc",function(){
             var th = $(this);
             //查找按钮
             if(th.hasClass("searchBtn")){
                 initPage(orderTemp,$("input[name='context']").val(),1);
             }
             //清空按钮
             /* if(th.hasClass("cleanBtn")){
                 $("input[name='context']").val("");
                 initPage(orderTemp,"",1);
             } */
             //视频名称点击
             if(th.hasClass("video_li")){
                var id = th.attr("value");
                location.href = "<%=request.getContextPath()%>/client/videoDetail?id="+id;
             }
             if(th.hasClass("desc")){
            	 $("#ssinput").val("");
            	 initPage("desc","",1);
             }
             if(th.hasClass("asc")){
            	 $("#ssinput").val("");
            	 initPage("asc","",1);
             }
        });
});

//初始化列表
    function initPage(isOrder,context,currentPage){
        //tab转换
        if(isOrder == "desc"){
            $(".desc").addClass("sp-bf-on");
            $(".asc").removeClass("sp-bf-on");
        }else{
            $(".asc").addClass("sp-bf-on");
            $(".desc").removeClass("sp-bf-on");
        }
        contextTemp = context;
        orderTemp = isOrder;
        //列表展示
        $.post("<%=request.getContextPath()%>/client/getVideos",{"isOrder":isOrder,"context":context,"currentPage":currentPage},function(data){
            var tbody = "";
            var pageUtil = data.pageUtil;
            $.each(data.list,function(index,entry){
                tbody +=
                    "<tr>"+
                        "<td>"+((pageUtil.currentPage-1)*pageUtil.pagesize*1+index+1)+"</td>"+
                        "<td><a class='video_li' value='"+entry.fileid+"'>"+entry.filename+"</a></td>"+
                        "<td>"+entry.wave+"</td>"+
                        "<td>"+entry.stand+"</td>"+
                        "<td>"+entry.holdThePhone+"</td>"+
                        "<td>"+entry.leave+"</td>"+
                        "<td>"+entry.scratch+"</td>"+
                        "<td>"+entry.sit+"</td>"+
                        "<td>"+
	                        "<a href='#' class='play video_li' value='"+entry.fileid+"'></a>"+
	                    "</td>"+
                    "</tr>";
                    
            })
            $("#videoList").html(tbody);
            
            //搜索框赋值 (context,isOrder)
            $("input [name='context']").val(pageUtil.context);
            
            //分页-s
            var element = $('#bp-element');
            options = {
                bootstrapMajorVersion:3, //对应的bootstrap版本
                currentPage: pageUtil.currentPage, //当前页数，这里是用的EL表达式，获取从后台传过来的值
                numberOfPages: pageUtil.pagesize, //每页页数
                totalPages: pageUtil.totalpage,//总页数，这里是用的EL表达式，获取从后台传过来的值
                shouldShowPage:true,//是否显示该按钮
                itemTexts: function (type, page, current) {//设置显示的样式，默认是箭头
                    switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                            return "末页";
                        case "page":
                            return page;
                    }
                },
                //点击事件
                onPageClicked: function (event, originalEvent, type, page) {
                    initPage(isOrder,context,page);
                }
            };
            element.bootstrapPaginator(options);
            //分页-e
        },"json");
    }
</script>
</head>

<body class="kh-body">
<div class="h30">
<div class="kh_top_m_d">
        
        
        
        <script type="text/javascript">
            $(document).ready(function(){
                    
                jQuery.navlevel2 = function(level1,dytime) {
                    
                  $(level1).mouseenter(function(){
                      varthis = $(this);
                      delytime=setTimeout(function(){
                        varthis.find('div').slideDown();
                    },dytime);
                    
                  });
                  $(level1).mouseleave(function(){
                     clearTimeout(delytime);
                     $(this).find('div').slideUp();
                  });
                  
                };
              jQuery.navlevel2("div.kh_mainlevel",200);
            });
            </script>
            
            <div class="kh_mainlevel">
                <span class="kh_top_m_a"><%=user.getUsername()%></span>
                <div style="display: none;">
                    <a href="#"><%=user.getUsername()%></a>
                    <a href="#" onclick="logout()">退出</a>
                </div>
            
            </div>
        </div>
</div>
<div class="h60 bg-white">
    <a href="#" class="khdlogo mar-lr40"></a>
</div>
<div class="h20"></div>


<div class="mar-lr40 bd1 bg-white">
    <div class="mar-lr40 pad-tb40">
        <div class="sp-bf-nav">
            <a class="sp-bf asc">所有视频</a><a class="sp-bf desc">最近播放</a>
            
            <ul class='view-nav'>
                <li class="on"><a href="javascript:void(0)" onclick="location.reload()" ><i class="i1"></i>同步数据</a></li>
                <%--<li class="w30"><a href="#"><i class="i4"></i></a></li>--%>
            </ul>
        </div>
        
        <div class="clear h20"></div>
        <div class="ss">
            <form action="#" id="ssform" method="post" ><input id="ssinput" type="text"  placeholder="请输入名称搜索..." /><a id="ssbtn">搜索</a></form>
        </div>
<%--
        <span class="gjjs">高级检索</span>
--%>

        <div class="clear"></div>
        
        
        <div class="bg-cf">
        <table class="layui-table ltc  bd-nt">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>名称</th>
                    <th>挥手</th>
                    <th>探身</th>
                    <th>电话</th>
                    <th>离开</th>
                    <th>手比</th>
                    <th>坐</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="videoList"></tbody>
            <!-- <tbody>
                <tr>
                    <td>1</td>
                    <td>HXD3D0042_成都韵达_10_二端司机室_20170513_12302.mp4</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>
                        <a href="#" class="play"></a>
                    </td>
                </tr>
               
            </tbody> -->
        </table>
        
        <div class="clear h25"></div>
       <!--  <div class="page">
            <table border="0" align="center" cellpadding="0" class="page1">
                <tbody><tr><td>
                    <ul>
                        
                        <li><a class="avrp"><font></font></a></li> 
                        <li class="pagered"><a>1</a></li>
                        <li ><a>2</a></li>
                        <li><a>3</a></li>
                        <li><a>4</a></li>
                        <li><a class="nextpa"><font class="f14 block fl">下一页</font><i class="nextP fl"></i></a></li>
                        <div class="pagef"><form id="pageform" method="post"><span>到</span><input type="text" id="pageinp" name="page"/><span>页</span><a id="btn_page">确定</a></form></div>
                    </ul>
                </td></tr></tbody>
            </table>
        </div> -->
        <center><ul id='bp-element'></ul></center>
        <div class="clear h25"></div>
        </div>
        
        
        
        
        
    </div>
</div>
<div class="clear h20"></div>
</body>
</html>
